'use client'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector';
import { LanguagesSupported } from '@/i18n/language'

import EN_US from './en-US';
import ZH_HANS from './zh-Hans';
import ZH_HANT from './zh-Hant';

const loadLangResources = (lang: string) => {
  // if (lang === 'en-US') return { translation: EN_US };
  // if (lang === 'zh-Hans') return { translation: ZH_HANS };
  // if (lang === 'zh-Hant') return { translation: ZH_HANT };
  return { translation: ZH_HANS };
}

// Automatically generate the resources object
const resources = LanguagesSupported.reduce((acc: any, lang: string) => {
  acc[lang] = loadLangResources(lang)
  return acc
}, {})

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: navigator.language,
    fallbackLng: 'en-US',
    resources,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  })

export const changeLanguage = i18n.changeLanguage
export default i18n
